<template>
  <div class="weather-display">
    <div class="weather-forecast">
      <div>
        <span>今天</span>
        <span>{{ dailyWeatherForecasts[0].date.substr(5, 9) }}</span>
        <span>{{ dailyWeatherForecasts[0].weather }}</span>
        <span>风力 {{ dailyWeatherForecasts[0].windPower }}级</span>
      </div>
      <div>
        <span>明天</span>
        <span>{{ dailyWeatherForecasts[1].date.substr(5, 9) }}</span>
        <span>{{ dailyWeatherForecasts[1].weather }}</span>
        <span>风力 {{ dailyWeatherForecasts[1].windPower }}级</span>
      </div>
      <div>
        <span>{{ getDayOfWeek(dailyWeatherForecasts[2].date) }}</span>
        <span>{{ dailyWeatherForecasts[2].date.substr(5, 9) }}</span>
        <span>{{ dailyWeatherForecasts[2].weather }}</span>
        <span>风力 {{ dailyWeatherForecasts[2].windPower }}级</span>
      </div>
      <div>
        <span>{{ getDayOfWeek(dailyWeatherForecasts[3].date) }}</span>
        <span>{{ dailyWeatherForecasts[3].date.substr(5, 9) }}</span>
        <span>{{ dailyWeatherForecasts[3].weather }}</span>
        <span>风力 {{ dailyWeatherForecasts[3].windPower }}级</span>
      </div>
    </div>
    <div class="weather-chart">
      <v-chart :option="option"></v-chart>
    </div>
  </div>
</template>

<script setup>
import { useWeatherStore } from '@/stores/weatherStore.js';

const { getDayOfWeek } = useWeatherStore();

const props = defineProps({
  dailyWeatherForecasts: {
    type: Array,
    default: () => [],
    required: true,
  },
  option: {
    type: Object,
    default: () => ({}),
    required: true,
  },
});
</script>

<style lang="scss" scoped>
.weather-display {
  background-color: #004e71;
  margin-top: 0.55rem;
  padding: 2.5rem 3rem 0 3rem;
  border-radius: 0.25rem;
  .weather-forecast {
    display: flex;
    gap: 1.5rem;
    div {
      flex: 1 1 0%;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      text-align: center;
      line-height: 1.5rem;
    }
  }
  .weather-chart {
    height: 10rem;
    margin-top: 2.5rem;
  }
}
</style>
